<template>

  <!--  头部导航栏-->
  <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight">
    <!-- 右边搜索按钮的图标-->
    <template #right>
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>

  <!--  中间内容-->
  <template v-if="active === 'index'">
    <Index/>
  </template>
  <template v-if="active === 'team'">
    <Team/>
  </template>

  <!--  底部导航栏-->
  <van-tabbar v-model="active" @change="onChange">
    <van-tabbar-item icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item icon="friends-o" name="user">个人</van-tabbar-item>
  </van-tabbar>

</template>

<script setup>
//下面下的方法会直接暴露给id为setup的组件
import {ref} from "vue";
import {Toast} from "vant";
import Index from "../pages/Index.vue";
import Team from "../pages/Team.vue";

const onClickLeft = () => alert('左')
const onClickRight = () => alert('右');

const active = ref('index');
const onChange = (index) => Toast(`标签 ${index}`);

</script>

<style scoped>

</style>